<template>
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <div class="game-fl diy-nav-bar ">
        <a class="diy-control-item" :class="active_diy_nav_idx===0?'mui-active':''" href="javascript:void(0)" @click="active_diy_nav_idx=0">首页</a>
<!--        <a class="diy-control-item" :class="active_diy_nav_idx===1?'mui-active':''" href="javascript:void(0)" @click="active_diy_nav_idx=1">专业</a>-->
        <a class="diy-control-item" :class="active_diy_nav_idx===2?'mui-active':''" href="javascript:void(0)" @click="active_diy_nav_idx=2">我的</a>
      </div>
    </header>

    <div v-show="active_diy_nav_idx===0" class="mui-content">
      <!--search form-->
<!--      <section class="container search diy-content-space-small">-->
<!--        <form action="http://m.tiantianquce.com/index.php/wetest/index/search/q/" class="form" method="post" data-ui="static" id="search-form">-->
<!--          <div data-role="input">-->
<!--            <input placeholder="大家都在搜：恋爱中，你有多深情？" type="text" autocomplete="off" autocorrect="off" maxlength="64" name="q" id="search">-->
<!--            <i class="iconfont icon-search"></i>-->
<!--            <i class="iconfont icon-close"></i>-->
<!--          </div>-->
<!--          <button class="ui-btn" data-ui="danger small" type="button" id="search-btn">搜索</button>-->
<!--        </form>-->
<!--      </section>-->
      <!--slider-->
<!--      顶部滚动栏-->
      <div class="swiper-container diy-content-space main-content swiper-container-horizontal" id="banner-slider">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(slider, idx) in sliders" :key="idx">
            <a :href="slider.Url" target="_blank">
              <img :src="slider.ImgUrl" style="width: 100%;height: 100%" alt="">
            </a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- end slider -->
      <section class="main-content" id="hash-rcmd">
        <h5 class="diy-content-padded">专业测评·占卜</h5>
        <div class="mui-table-view mui-grid-view mui-grid-9" style="background: #ffffff">
          <swiper :options="swiperOption2">
            <swiper-slide v-for="(advertisement, idx) in advertisements" :key="idx">
              <div class="mui-table-view-cell mui-media" style="padding: 5px 8px;border: none">
                <a :href="advertisement.Url" target="_blank" style="padding: 0">
                  <figure class="cover cover_recommend">
                    <img v-lazy="advertisement.ImgUrl" class="tuijian-img">
<!--                    <img class="original-span" src="divination.png">-->
                  </figure>
                  <div class="mui-media-body tuijian-title">{{advertisement.Title}}</div>
                </a>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </section>
      <!-- all list  -->
      <section id="all-game" class="main-content">
        <h5 class="diy-content-padded">全部测试</h5>
        <div class="diy-tab diy-space-big">
          <a class="diy-tab-item" :class="active_diy_tab_idx===0?'mui-active':''" href="javascript:void(0)" @click="active_diy_tab_idx=0">最新</a>
          <a class="diy-tab-item" :class="active_diy_tab_idx===1?'mui-active':''" href="javascript:void(0)" @click="active_diy_tab_idx=1">最火</a>
          <a class="diy-tab-item" :class="active_diy_tab_idx===2?'mui-active':''" href="javascript:void(0)" @click="active_diy_tab_idx=2">推荐</a>
        </div>
        <list v-if="active_diy_tab_idx===0" v-bind:kind="'utime'" key="utime"></list>
        <list v-if="active_diy_tab_idx===1" v-bind:kind="'view'"  key="view"></list>
        <list v-if="active_diy_tab_idx===2" v-bind:kind="'advertisement'" key="advertisement"></list>
      </section>
    </div>
    <div v-if="active_diy_nav_idx===2" class="mui-content">
      <section class="main-content">
        <h5 class="diy-content-padded">测试历史</h5>
        <list v-bind:kind="'history'"  key="history"></list>
      </section>
    </div>
  </div>
</template>

<script>
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import list from '@/components/list'
export default {
  name: 'home',
  components: {
    swiper,
    list,
    swiperSlide
  },
  data() {
    return {
      active_diy_nav_idx: 0,
      active_diy_tab_idx: 0,
      // 顶部滚动栏数据
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
      },
      sliders:[],
      slider:{
        Img:"",
        Url:"",
      },

      // 测评滚动栏数据
      swiperOption2: {
        slidesPerView: 4,
        freeMode: true,
        slidesPerColumn: 2,
        spaceBetween: 0,
        autoplay: {
          delay: 10000,
          disableOnInteraction: false
        },
      },
      advertisements:[],
      advertisement:{
        "Kind": "",
        "Img": "",
        "Title": "",
        "Desc": "",
        "View": 0,
        "Url": ""
      }
    }
  },
  created(){
    let id = localStorage.getItem("scan-id");
    if(id) {
      localStorage.removeItem("scan-id");
      this.$router.push({ path: '/testing', query: { id: id}})
    } else {
      this.$axios.get("/sliders").then((resp) => {
        let data = resp.data;
        if (data.sliders) {
          this.sliders = data.sliders;
        }
      });
      this.$axios.get("/advertisements", {params: {page: 1, limit: 40}}).then((resp) => {
        let data = resp.data;
        if (data.advertisements) {
          this.advertisements = data.advertisements;
        }
      })
    }
  }
}
</script>
<style>
  .mui-inner-wrap section {
    margin: 10px 2px;
    border-radius: 4px;
  }
</style>
